<template>
	<div class="boss-tab">
		<lunbo class = "lunbo" :list = 'list' :isfull = 'disp'></lunbo>
		<div class="shop-number">
			<h4>{{Info.title}}</h4>
			<hr />
			<div>
				<span class="price-two">市场价<span>{{Info.market_price}}</span></span><span class="price-one">销售价<span>{{Info.sell_price}}</span></span>
			</div>
			<div>
				<span>购买数量 :</span>
				<div class="number">
					<span @click="dele" :class="{'adds':isput}">-</span>
					<input @blur="text" oninput="value=value.replace(/[^\d]/g,'')" type="text" v-model="numbers" :class="{'bulr':isbut}"/>
					<transition @befor-enter = 'beforeEnter' @enter = 'enter' @after-enter = 'afterEnter'>
							<div class="globule" ref = "dom" v-if="flag"></div>
					</transition>
					<span @click="add">+</span>
				</div>
				<div class="buttom-btn">
					<input type="button" value="立即购买" class="bottom-shop">
					<input type="button" @click="add_shop" value="加入购物车" class="bottom-push">
				</div>
				
			</div>
		</div>
		<div class="shop-number">
			<h4>商品参数</h4>
			<hr />
			<div>
				<p>商品编号 :<span>{{Info.goods_no}}</span></p>
				<p>库存情况 :<span>{{Info.stock_quantity  || 0}}</span>件</p>
				<p>上架时间 :<span>{{Info.add_time | times('YYYY-MM-DD')}}</span></p>
			</div>
			<hr />
			<div class="present">
				<input type="button" @click="present" value="图文介绍" class="bottom-present">
				<input type="button" @click="discuss" value="商品评论" class="bottom-discuss">
			</div>
			</div>
		</div>
	</div>
</template>

<script>
	import lunbo from '../assembly/luobo.vue'
	import {Toast} from 'mint-ui'
	export default{
		data(){
			return {
				id:this.$route.params.id,
				list:[],
				disp:false,
				numbers:1,
				isbut:false,
				isput:true,
				Info:{},
				flag:false
			}
		},
		created(){
			this.getlunbo();
			this.getInfo();
		},
		methods: {
			getlunbo(){
				this.$http.get("api/getthumimages/"+this.id).then((resolve)=>{
					if (resolve.body.status == 0) {
						resolve.body.message.forEach((item,index)=>{
							item.id = index;
							item.img = item.src;
						})
						this.list = resolve.body.message;
					} else{
						Toast('错误')
					}
				},(reject) => {
					Toast('网络错误!')
				})
			},
			getInfo(){
				this.$http.get("api/goods/getinfo/"+this.id).then((resolve)=>{

					if (resolve.body.status == 0) {
						console.log(resolve.body.message)
						this.Info = resolve.body.message[0];
						
					} else{
						Toast('错误')
					}
				},(reject) => {
					Toast('网络错误!')
				})
			},
			add(){
				if ( this.numbers >= this.Info.stock_quantity) {
					Toast('最大库存量为'+this.Info.stock_quantity)
					this.numbers = this.Info.stock_quantity
				} else{
					 this.numbers++;
				}
				
				 
			},
			dele(){
				if (this.numbers == 1) {
					
				} else{
					this.numbers--;
					
				}
				
			},
			present(){
				this.$router.push('present/'+this.id)
			},
			discuss(){
				this.$router.push('discuss/'+this.id)
			},
			add_shop(){
				this.flag = !this.flag;
				this.$emit('zdy',this.numbers)
			},
			text(){
				if (this.numbers == 0) {
					Toast('数量超出范围!');
					this.numbers = 1
				}
				
			},
			beforeEnter(el){
							el.style.transform = "translate(0,0)"
							el.style.opacity = 0;
			},
			enter(el,done){
				el.offsetWidth;
				const x = el.getBoundingClientRect()
				// const y = this.$refs.dom.getBoundingClientRect();
				const y = document.getElementById('point').getBoundingClientRect()
				const tops = y.left - x.left;
				const lefts = y.top - x.top;
							el.style.transform = `translate(${tops}px,${lefts}px)`;				
							el.style.opacity = 1;
							el.style.transition = "all,0.5s";
							done();
			},
			afterEnter(el){
					this.flag = !this.flag;
			},
		},
		watch: {
			numbers(val){
				// console.log(parseInt(val))
				
				if(parseInt(val) >= this.Info.stock_quantity){
					Toast('最大库存量为'+this.Info.stock_quantity)
					this.numbers = parseInt(this.Info.stock_quantity)				
				}else if (parseInt(val) == 0 || val == '') {				
					this.numbers = 0;
					this.isput = true
					 
				} else if(parseInt(val) >= 10){
					// this.numbers = parseInt(val);
					this.isbut = true;
					this.isput = false
					 
				}else if(parseInt(val) < 10){
					this.numbers = parseInt(val);
					this.isbut = false;
					this.isput = false
					
				}else{
					this.isput = false
				}
				 this.$emit('zdy',this.numbers)
			}
		},
		components:{
			'lunbo':lunbo
		}
	}
</script>

<style lang="less" scoped>
	.boss-tab{
		background: #ededed;
		overflow: hidden;
		margin-bottom: 3em;
	}
	.lunbo{
		margin: 10px 10px;
		box-shadow: 2px 2px 2px #888;
		background: white;
	}
	.price-one{
		color: red;
		font-size: 15px;
		margin-right: 10px;
		margin-left: 10px;
	}
	.price-two{
		color: #999999;
		font-size: 12px;
		text-decoration: line-through;
	}
	.shop-number{
		background: white;
		margin: 10px 10px;
		box-shadow: 2px 2px 2px #888;
		padding: 10px 0px;
		div{
			margin: 5px 10px;
		}
		h4{
			margin: 10px 10px;
		}
		p{
			font-size: 13px;
		}
	}
	.number{
		display: inline-block;
		position: relative;
		input{
			width: 25px;
			height: 25px;
			padding-left: 7px; 
			padding-right: 0px;
			box-sizing:border-box;
			border: 1px solid #999999;
			margin: 0 0;
		}
		span{
			display: inline-block;
			margin: 0 0;
			width: 25px;
			height: 25px;
			border: 1px solid #999999;
			text-align: center;
			vertical-align:middle;
			 background: #ededed;
		}
	}
	.bulr{
		padding-left: 0px!important; 
	}
	.adds{
		color: #999999;
	}
	.bottom-shop{
		background: skyblue;
		color: white;
	}
	.bottom-push{
		background: red;
		color: white;
	}
	.buttom-btn{
		margin: 0 0 20px 0!important;
	}
	hr{
		margin: 15px 0!important;
	}
	.present{
		input{
			width: 100%;
			margin: 5px 0;
		}
		.bottom-present{
			border: 1px solid double;
			color: double;
		}
		.bottom-discuss{
			border: 1px solid red;
			color: red;
			margin-bottom: 10px;
		}
		
	}
	.globule{
				width: 15px;
				height: 15px;
				background: red;
				border-radius: 50%;
				position: absolute;
				top: 0px;
				left: 25px;
				z-index: 999;
	}
</style>
